﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/App.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Ornament.Messages" %>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

    <script src="/Scripts/treeView/jquery.treeview.js" type="text/javascript"></script>

    <script src="/Scripts/PodMenu/ui.iPodMenu.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.bindTools.js" type="text/javascript">
    </script>

    <script type="text/javascript" src="/Scripts/jquery.json.min.js"></script>

    <link href="/Scripts/PodMenu/ui.iPodMenu.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/treeView/jquery.treeview.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .lPanel
        {
            float: left;
            width: 400px;
            height: 450px;
        }
        .rPanel
        {
            float: left;
        }
        #infoTypeSelectorPanel
        {
            position: absolute;
            display: none;
        }
        #infoTypeTree
        {
            overflow: auto;
            height: 423px;
        }
        .selectedNav
        {
            background-color: Gray;
            color: White;
        }
    </style>

    <script type="text/javascript">

        $(document).ready(function() {
            $("#infoTypeSelector").iPodMenu({
                title: "选择信息类型",
                rootTitle: "未选择"
            });

            $("#createInfo").click(function() {

            });

            $(".rPanel").bindTool({
                "get": {
                    url: '<%=Url.Action("Get") %>'
                },
                onBound: function() {
                    var isAdd = $("#Id").val() == "";
                    $("#add").toggle(isAdd);
                    $("#save").toggle(!isAdd);
                }
            });
            //left panel init.
            $("a", $("#infoTypeTree").treeview()).click(function() {
                var data = {
                    Id: GetId($(this))
                };
                if (data.Id != "root") {
                    $(".rPanel").bindTool('bind', data);
                    $(".selectedNav").removeClass("selectedNav");
                    $(this).addClass("selectedNav");
                }
                return false;
            });

            //editPanel
            $("#ParentName").click(function(e) {
                var parentLink = this;
                var offset = $(this).offset();
                var panel = $("#infoTypeSelectorPanel").css({
                    top: (offset.top + $(this).height()),
                    left: offset.left
                }).show()

                $("a", panel).click(function() {
                    $("#ParentId").val(GetId($(this)));
                    $(parentLink).text($(this).text());
                    panel.hide();
                    return false;
                });
                e.stopPropagation();
            });

            //when click out of the Panel hide the I-pod menu.
            $(this).click(function() {
                HideInfoParent();
            }).keydown(function(e) {
                if (e.keyCode == 27) { HideInfoParent(); }
            });


            $("#add").click(function() {
                var obj = {
                    Name: $("#Name").val(),
                    ParentId: $("#ParentId").val(),
                    Command: $("#command").val()
                };
                $.post('<%=Url.Action("Save")%>', { type: $.toJSON(obj) }, function(data) {
                    alert(data.Message);
                    var id = data.Data.Id;
                    var parentId = $("#ParentId").val();
                    if (parentId.length == 0) {
                        parentId = "root";
                    }
                    var branch = $("<li><a href=#" + id + ">" + obj.Name + "</a></li>").appendTo($("#infoTypeTree a[href=#" + parentId + "]"));
                    $("#infoTypeTree").treeview({
                        add: branch
                    });

                    $(".rPanel").bindTool('clear');
                });

            });

            $("#save").click(function() {
                var obj = $(".rPanel").bindTool('collect');

                $.post('<%=Url.Action("Save")%>', { type: $.toJSON(obj) }, function(data) {

                    var info = $("#infoTypeTree a[href=#" + obj.Id + "]");
                    info.text(obj.Name);
                    $(".rPanel").bindTool('clear');
                });
            });
        });

        function GetId(target) {
            var id = $(target).attr("href");
            var position = id.indexOf("#") + 1;
            return id.substr(position);
        }
        function HideInfoParent() {
            $("#infoTypeSelectorPanel").hide();
        }
    </script>

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    信息设定
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="buttonContainer">
        <button id="createInfo">
            添加</button>
    </div>
    <div class="lPanel panel ui-widget-content ui-widget ui-corner-all">
        <div class="ui-widget-header ui-corner-all">
            信息类型树
        </div>
        <ul id="infoTypeTree">
            <li><a href="#root">根节点</a>
                <ul>
                    <%
                        Build((IList<InfoType>)ViewData["types"], true);
                    %>
                </ul>
            </li>
        </ul>
    </div>
    <fieldset class="rPanel cssform">
        <legend>添加信息类型</legend>
        <p>
            <label>
                名字:</label>
            <input type="text" id="Name" />
            <input type="hidden" id="Id" />
        </p>
        <p>
            <label>
                父节点:</label>
            <a id="ParentName">选择所属信息类型</a>
            <input type="hidden" id="ParentId" />
        </p>
        <p>
            <label>
                备注:</label>
            <textarea id="Comment"></textarea>
        </p>
        <div class="toolbar">
            <button id="save" style="display: none">
                保存</button>
            <button id="add">
                添加</button>
        </div>
    </fieldset>
    <div style="clear: both">
    </div>
    <div id="infoTypeSelectorPanel">
        <ul id="infoTypeSelector">
            <li><a href="#<%=Guid.Empty.ToString()%>">无父类型</a>
                <ul>
                    <%
                        Build((IList<InfoType>)ViewData["types"], true);
                    %>
                </ul>
            </li>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageTitle" runat="server">
    信息类型设定
</asp:Content>

<script type="text/C#" runat="server">
    private void Build(IList<InfoType> childNodes, bool first)
    {

        foreach (var node in childNodes)
        {
            if (node.Count == 0)
            {
                Response.Write(String.Format(("<li><a href='#{0}'>{1}</a></li>"), node.Id.ToString(), node.Name));
            }
            else
            {
                Response.Write(String.Format(("<li><a href='#{0}'>{1}</a>"), node.Id.ToString(), node.Name));
                Response.Write("<ul>");
                this.Build(node.GetChilds(), false);
                Response.Write("</ul>");
                Response.Write("</li>");
            }


        }
    }
</script>

